// 1. 获取相关元素
let tabs = document.querySelectorAll('.ebook .title li');
let box = document.querySelectorAll('.ebook .conts .ebook-list');
// 2. 给所有的tab栏绑定点击事件
for(let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = function() {
        // 3. 所有的tab栏取消默认样式
        for(let j = 0; j < tabs.length; j++) {
            tabs[j].className ='';
            // 4. 所有的内容隐藏
            box[j].className = 'ebook-list fl active';
        }
        // 3. b.给当前点击的tab栏添加默认样式
        this.className = 'on';
        // 4. b 让当前点击的tab栏对应的内容显示出来
        box[i].className = 'ebook-list fl active';
    }
}

// 手风琴
// 1. 给所有的li绑定鼠标移入事件
$('.ebook .ebook-right li').on('mouseover', function(){
    // 2. 让当前li里面的内容显示,标题隐藏
    $(this).children('h5').hide();
    $(this).children('div').show();
    // 3. 其他的所有li标题显示，内容隐藏
    $(this).siblings().children('h5').show();
    $(this).siblings().children('div').hide();
})




// 1. 监听鼠标滚轮事件
$(window).on('scroll', function(){
    // 2. 获取滚动条距离顶部的位置
    let sTop = parseInt($(this).scrollTop());
    // 3. 判断当位置超过300是，让固定头部向下划出
    if(sTop > 300) {
        $('.fixedHeader').slideDown();
        // 5. 将普通头部的搜索框直接插入到固定头部里面来 appendTo
        $('.search-wrap .search').appendTo($('.fixedHeader'));
    } else {
        // 4. 当不超过300时，让固定头部向上划入
        $('.fixedHeader').slideUp(0);
        $('.fixedHeader .search').appendTo($('.search-wrap'))
    }
})

// 电梯导航鼠标移入移出效果
let colorArr = ['greenyellow', 'hotpink', 'orange', 'peachpuff', 'skyblue']
$('.e-nav li').hover(function(){
    let index = $(this).index();
    // 鼠标移入的效果
    // 注意：jq没有封装背景色的自定义动画
    $(this).css({
        width: '80px',
        backgroundColor: colorArr[index],
        backgroundPositionX: '-40px'
    })
}, 
function(){
    // 鼠标移出效果
    $(this).css({
        width: '',
        backgroundColor: '',
        backgroundPositionX: '0'
    })
})


// 1. 给所有电梯导航li绑定点击事件
$('.e-nav li').on('click', function(){
    // 2. 获取当前点击的li的索引
    let index = $(this).index();
    // console.log(index);
    // 3. 根据这个索引找到对应楼层
    let fl = $('.floor').eq(index);
    // 4. 获取对应楼层距离文档顶部的高度
    let fTop = fl.offset().top;
    // 5. 让整个文档移动对应的高度
    $('html, body').animate({
        scrollTop: fTop - 50 + 'px'
    })
})


// 回到顶部
toTop.onclick=function(){
    var y=window.scrollY; //获取当前滚动条的位置
    var timer=setInterval(function(){
        y-=50;
        window.scrollTo(0, y);

        //滚动到最顶部时，就清除定时器停止滚动
        if(y<=0){
            clearInterval(timer);
        }
    },20);
}
